<!DOCTYPE html>
<html>
    <head>
        <style>

            body .yui3-button-selected {
                background-color:#426FD9;
                color:white;
            }
        </style>

        <script src='../../../../build/yui/yui-min.js'></script>

        <script>
            YUI({
                debug: true,
                combo: false,
                filter: 'raw'
            }).use('button-group', 'console', function(Y){

                new Y.Console().render();

                var groupA = new Y.ButtonGroup({
                    srcNode: '#groupA',
                    type: 'radio'
                }).render();

                var groupB = new Y.ButtonGroup({
                    srcNode: '#groupB',
                    type: 'radio'
                }).render();

                var groupC = new Y.ButtonGroup({
                    srcNode: '#groupC',
                    type: 'checkbox'
                }).render();

                groupA.on('selectionChange', function(e){
                    var button = e.target.getSelectedButtons()[0];
                    button.set('label', button.get('label') + "+");
                    Y.log('groupA - Currently selected: ' + this.getSelectedValues());
                    //console.log(groupB.getBar());
                });

                groupB.on('selectionChange', function(){
                    Y.log('groupB - Currently selected: ' + groupB.getSelectedValues());
                    //console.log(groupB.getBar());
                });

                groupC.on('selectionChange', function(){
                    Y.log('groupC - Currently selected: ' + groupC.getSelectedValues());
                });

            });
        </script>
    </head>

    <body class='yui3-skin-sam'>

        <div id='yconsole'></div>

        <h1>Button Example: Groups</h1>

        <hr />

        <h2>Radio A</h2>
        <div id='groupA'>
            <button>**<span class='yui3-button-label'>1</span>**</button>
            <input type='button' value='2'>
            <input type='reset' value='3'>
            <input type='submit' value='4'>
            <input type='button' value='5'>
            <input type='button' value='6'>
        </div>

        <h2>Radio B</h2>
        <div id='groupB'>
            <input type='button' value='1'>
            <input type='button' value='2'>
            <input type='button' value='3'>
            <input type='button' value='4'>
            <input type='button' value='5'>
            <input type='button' value='6'>
        </div>

        <h2>Checkbox</h2>
        <div id='groupC'>
            <input type='button' value='a'>
            <input type='button' value='b'>
            <input type='button' value='c'>
            <input type='button' value='d'>
            <input type='button' value='e'>
            <input type='button' value='f'>
        </div>

    </body>
</html>
